<template>
  <view class="warehouse-item">
    <view class="item-header">
      <view class="left">
        <text class="label">{{ transporTypeText }}库单号：</text>
        <text class="number">{{ item.inOrOutOrderNumber }}</text>
      </view>
      <view :class="['status', getStatusClass(item.inOrOutWarehouseStatus)]">{{
        statusText
      }}</view>
    </view>
    <view class="divider"></view>
    <view class="item-content">
      <view class="info-row">
        <view class="info-col">
          <text class="label">{{ transporTypeText }}库类型：</text>
          <text class="value">{{ getOperateTypeText(item.operateType, transporType) }}</text>
        </view>
        <view class="info-col">
          <text class="label">{{ transporTypeText }}库仓库：</text>
          <text class="value">{{ getWarehouseName(item) }}</text>
        </view>
        <view class="info-col">
          <text class="label">备注说明：</text>
          <text class="value">{{ item.remarks }}</text>
        </view>
      </view>
      <view class="info-row">
        <view class="info-col">
          <text class="label">应{{ transporTypeText }}数量：</text>
          <text class="value">{{ item.totalNumber }}</text>
        </view>
        <view class="info-col">
          <text class="label">实{{ transporTypeText }}数量：</text>
            <text class="value">{{  transporType == 1 ? item.actualOutputQuantityTotalNumber : item.actualQuantityTotalNumber }}</text> 
        </view>
        <view class="info-col">
          <text class="label">创建时间：</text>
          <text class="value">{{ item.createTime }}</text>
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="item-footer">
      <button class="detail-btn" @tap="viewDetail">查看详情</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "warehouse-item",
  props: {
    item: {
      type: Object,
      required: true,
    },
    transporType: {
      type: Number,
      default: 1, //1:入库 2:出库
    },
  },
  data() {
    return {
      operateTypeDict: {
        //(1:调拨出入库  2:退货出库 3:采购入库)
        1: {
          1: "调拨出库",
          2: "调拨入库",
        },
        2: "退货出库",
        3: "采购入库",
        4: "销售出库",
        5: "销售退货入库",
      },
    };
  },
  computed: {
    statusText() {
      // 0:待出库(待入库) 1:已出库(已入库) 2:已取消
      const statusMap = {
        1: {
          0: "待出库",
          1: "已出库",
          2: "已取消",
        },
        2: {
          0: "待入库",
          1: "已入库",
          2: "已取消",
        },
      };
      return (
        statusMap[this.transporType][this.item.inOrOutWarehouseStatus] ||
        "未知状态"
      );
    },
    transporTypeText() {
      const transporTypeMap = {
        1: "出",
        2: "入",
      };
      return transporTypeMap[this.transporType] || "未知类型";
    },
  },
  methods: {
     getWarehouseName(item) {
      if (this.transporType == 1) {
        return item.transferOutRoomWarehouseName;
      } else if (this.transporType == 2) {
        return item.transferInRoomWarehouseName;
      }
    },
    getOperateTypeText(type, status) {
      if (type === 1) {
        return this.operateTypeDict[type][status] || "未知类型";
      } else{
        return this.operateTypeDict[type];
      }
    },
    getStatusClass(status) {
      const statusMap = {
        0: "pending",
        1: "completed",
        2: "cancelled",
      };
      return statusMap[status] || "unknown";
    },
    viewDetail() {
      this.$emit("view-detail", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.warehouse-item {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 32rpx;

    .left {
      display: flex;
      align-items: center;
      .label {
        font-size: 28rpx;
        color: #666;
      }
      .number {
        font-size: 28rpx;
        color: #1890ff;
      }
    }

    .status {
      padding: 4rpx 20rpx;
      border-radius: 24rpx;
      font-size: 24rpx;

      &.pending {
        color: #ff9900;
        background-color: #fff7e6;
      }
      &.completed {
        color: #52c41a;
        background-color: #f6ffed;
      }
      &.cancelled {
        color: #999;
        background-color: #f5f5f5;
      }
    }
  }

  .divider {
    height: 2rpx;
    background-color: #f0f0f0;
    margin: 0 32rpx;
  }

  .item-content {
    padding: 24rpx 32rpx;

    .info-row {
      display: flex;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-col {
        flex: 1;
        display: flex;
        align-items: center;

        .label {
          font-size: 28rpx;
          color: #666;
          white-space: nowrap;
        }
        .value {
          font-size: 28rpx;
          color: #333;
          margin-left: 8rpx;
        }
      }
    }
  }

  .item-footer {
    display: flex;
    justify-content: flex-end;
    padding: 24rpx 32rpx;

    .detail-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #1890ff;
      color: #fff;
      font-size: 28rpx;
      height: 56rpx;
      padding: 0 32rpx;
      border-radius: 28rpx;
      border: none;
      margin: 0;
      width: auto;
      min-width: 160rpx;
    }
  }
}
</style>
